<template>
    <div>
        <el-button style="text-align: right" type="success" icon="el-icon-circle-plus" plain @click="batchAddVisible = true">批量新增</el-button>
        <el-dialog :visible.sync="batchAddVisible" width="600px" top="10vh" title="批量新增用户">
            <el-form
                ref="dynamicValidateForm"
                v-loading="formLoading"
                :model="dynamicValidateForm"
                label-width="90px"
                label-position="left"
                style="margin: 0 100px 0 50px"
            >
                <el-form-item
                    prop="role"
                    label="角色"
                    :rules="[{ required: true, message: '请选择批量创建用户角色', trigger: 'blur' }]"
                >
                    <el-select v-model="dynamicValidateForm.role" placeholder="用户角色">
                        <el-option label="编辑者" :value="1" />
                        <el-option label="教师" :value="2" />
                    </el-select>
                </el-form-item>

                <el-form-item
                    v-for="(name, index) in dynamicValidateForm.names"
                    :key="name.key"
                    :label="'用户名' + (index+1)"
                    :prop="'names.' + index + '.value'"
                    :rules="{required: true, message: '用户名不能为空', trigger: ['blur', 'change']}"
                >
                    <el-col :span="18">
                        <el-input v-model="name.value"></el-input>
                    </el-col>
                    <el-col :span="4" :offset="1">
                        <el-button v-show="deleteVisible" @click.prevent="removeName(name)">删除</el-button>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :disabled="submitDisabled" @click="submitForm('dynamicValidateForm')">提交</el-button>
                    <el-button @click="addName">新增用户</el-button>
                    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
                </el-form-item>
            </el-form>
            <!--        <el-form-->
            <!--            ref="dataForm"-->
            <!--            v-loading="formLoading"-->
            <!--            :rules="rules"-->
            <!--            :model="temp"-->
            <!--            label-position="left"-->
            <!--            label-width="90px"-->
            <!--            style="margin: 0 100px 0 50px"-->
            <!--        >-->
            <!--            <el-form-item label="用户名" prop="username">-->
            <!--                <el-input v-model="temp.username" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="密码" prop="password">-->
            <!--                <el-input v-model="temp.password" type="password" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item v-if="displayCheckPwd" label="确认密码" prop="checkPass">-->
            <!--                <el-input v-model="temp.checkPass" type="password" autocomplete="off" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="角色" prop="role" style="margin-bottom: 50px">-->
            <!--                &lt;!&ndash;创建时为可选角色&ndash;&gt;-->
            <!--                <el-select-->
            <!--                    v-if="dialogStatus === 'create'"-->
            <!--                    v-model="temp.role"-->
            <!--                    placeholder="用户角色"-->
            <!--                >-->
            <!--                    <el-option label="编辑者" :value="1" />-->
            <!--                    <el-option label="教师" :value="2" />-->
            <!--                </el-select>-->
            <!--                &lt;!&ndash;编辑时角色固定&ndash;&gt;-->
            <!--                <el-tag-->
            <!--                    v-if="dialogStatus === 'update'"-->
            <!--                    :type="temp.role | roleTypeFilter"-->
            <!--                >-->
            <!--                    {{ temp.role | roleNameFilter }}-->
            <!--                </el-tag>-->
            <!--            </el-form-item>-->
            <!--            <el-divider content-position="left">选填信息</el-divider>-->
            <!--            <el-form-item label="邮箱" prop="email" style="margin-top: 35px">-->
            <!--                <el-input v-model="temp.email" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="联系方式" prop="phone">-->
            <!--                <el-input v-model="temp.phone" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="密保问题" prop="question">-->
            <!--                <el-input v-model="temp.question" />-->
            <!--            </el-form-item>-->
            <!--            <el-form-item label="密保答案" prop="answer">-->
            <!--                <el-input v-model="temp.answer" />-->
            <!--            </el-form-item>-->
            <!--        </el-form>-->
            <!--        <div slot="footer" class="dialog-footer">-->
            <!--            <el-button @click="dialogFormVisible = false">-->
            <!--                取消-->
            <!--            </el-button>-->
            <!--            <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">-->
            <!--                {{ dialogStatus==='create'?'创建用户':'保存修改' }}-->
            <!--            </el-button>-->
            <!--        </div>-->
        </el-dialog>
    </div>
</template>

<script>
import { batchCreateUsers } from '@/api/user'

export default {
    name: 'BatchAdd',
    data() {
        return {
            formLoading: false,
            batchAddVisible: false,
            dynamicValidateForm: {
                names: [{
                    value: ''
                }],
                role: 2
            }
        }
    },
    computed: {
        submitDisabled() {
            return this.dynamicValidateForm.names.length <= 0
        },
        deleteVisible() {
            return this.dynamicValidateForm.names.length !== 1
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    const _data = {
                        usernames: this.dynamicValidateForm.names.map(v => v.value),
                        role: this.dynamicValidateForm.role
                    }
                    this.formLoading = true
                    batchCreateUsers(_data).then(list => {
                        setTimeout(() => {
                            this.formLoading = false
                            this.batchAddVisible = false
                            this.$emit('create-success', list)
                        }, 500)
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
            const names = this.dynamicValidateForm.names
            names.splice(1, names.length)
        },
        removeName(item) {
            var index = this.dynamicValidateForm.names.indexOf(item)
            if (index !== -1) {
                this.dynamicValidateForm.names.splice(index, 1)
            }
        },
        addName() {
            this.dynamicValidateForm.names.push({
                value: '',
                key: Date.now()
            })
        }
    }
}
</script>

<style scoped>

</style>
